Video Recording in Mobile Applications
Description
Capture and display videos with the Video Player and Video Recorder/Player UX controls. Rich Data Capture.
Discussion
Video recording can be added to Cordova applications. Video recording will work in disconnected application. You can record as many videos as you want, and then when you sync you data with the server, the video files can be uploaded to the server. In this respect, syncing video files is identical to the way pictures and audio recordings are synced when the user has an internet connection.
When you sync data on your mobile device you can specify that media files (pictures, audio recordings and videos) should be uploaded to Amazon S3, rather than the Alpha server. Since media files can be quite large, uploading media files to S3 is often preferable to uploading these files to an Alpha server.
To support video recording a playback, two new UX controls are available:
Video Player
Video Recorder/Player (Cordova Applications Only)
The Video Player control is used when you only want to allow users to play back previously created video files. The Video Recorder/Player control will allow playback of previously created videos and recording of new videos.
To add a Video Player or Video Recorder/Player control to your UX component select the [More...] option in the list of Data Controls.
Both the Video Player and Video Recorder/Player controls are standard 'data controls'. This means that they have .setValue() and .getValue() methods, like all other data controls.
The .setValue() method is used to set the control to the URL of a video file.
The .getValue() method is used to read the current value of the control.
For example, in a Cordova application, after you end a video recording, if you called the .getValue() method for the control, the filename of the video that had just been recorded would be returned.
You can also convert the type of an existing control to a Video Player or Video Recorder/Player control by clicking on the smart field in the Control type prompt.
In the image below, the Video Player control is shown. Since the Player does not support recording, the control is not limited to applications that are running under Cordova.
The VCR buttons allow you to start, pause and resume playback. The fast forward and back buttons behave as follows:
- Action
- Behavior
- Single tap
Skip forward/back by 2 seconds
- Tap and hold
Step forward or backwards through the video
The double sided arrow icon at the right edge will allow you to switch into full screen mode.
The control also shows a progress indicator and how long the video has been playing
The appearance and behavior of the Video Recorder/Player control is essentially the same as the Video Player control, except that the Recorder/Player control include a button to switch from Playback mode to record mode:
Configuring the Video Recorder/Player and Video Player Controls
To configure the Video controls, click the smart field for the Control Properties property.
The Properties dialog for the Video Recorder/Player controls is shown below.
You can set the maximum allowed length (in seconds) of the video and you can specify code for the various events that the control fires.
How to Configure a Cordova Application to Support Video Recording/Playback
Let's assume you want to build a Cordova application that will allow users to enter/edit data and record videos. The application must work offline and when a connection is available the data must be synced to a SQL database on the server and the videos must be uploaded to S3.
This tutorial will highlight the key configuration settings you will need to make as you build the UX component.
Let's assume that the underlying schema of the table in which data must be stored is as follows:
- Field
- Description
- id
int (auto-increment) - primary key
- field1
a character field to contain textual information
- videofilename
a character field that contains the URL of the video
If the videos are being uploaded to Amazon S3 when data are synced, the videofilename field will contain values like:
http://alphamediacapture.s3.amazonaws.com/video1.MOV
On the other hand, if the video are being uploaded to the Alpha server, the videofilename field will contain values like:
videofiles/video1.MOV
(assuming that the video files are uploaded to a folder called 'videofiles' in the Webroot).
Step 1 - Create a UX control with a List/Detail view showing data from the SQL table. You can use the List Control Quick Setup genie to quickly create the List/Detail view.
Step 2 - Configure the fields in the List. After you have created the List you must edit the List and on the Fields tab, set the control type of the videoFilename field to Video.
In addition, if the video files are going to be uploaded to the Alpha server (as opposed to Amazon S3) you will also need to specify the folder on the Alpha server where the video files should be stored. To do this, click the smart field for the Video capture and storage properties.
The Video Capture Properties dialog is shown below. The Upload folder is where you specify the folder name.
For example, if you specify:
myVideos
The videos will be stored in a folder called myVideos that is relative to the Webroot. It is recommended that you specify a folder that is relative to the webroot. This will allow you to upload videos from the server to the device for storage in the device's file system so that videos are available for playback on your device even when you have no internet connection.
In addition to specifying the Upload folder you should also specify the Stored filename transformation expression. This property defines what gets stored in the videofilename field in the database. The builder for this property allows you to use 2 special placeholders: <Filename> - the fully qualified video filename, and <ShortFileName> - the name of the video file with no drive and path information.
You will typically want to store a filename that is relative to the Webroot. For example, if the Upload folder was set to myVideos then you should set this property to:
"myVideos/<shortFileName>"
With this setting, the actual data stored in the vidoefilename field in the database will look something like this:
myVideos/video1.MOV
If your videos are being uploaded to Amazon S3, it is not necessary to specify Video Capture Properties.Step 3 - Specify if media files (pictures, audios and videos) should be uploaded to the Alpha server or Amazon S3 when data are synced.
To do this, edit the List properties and go to the Detail View tab. Then click the smart field for the Media files (photos, videos, audio recordings, other) settings property.
This dialog will allow you to specify if media files are uploaded to the Alpha server or to Amazon S3.
The dialog will also allow you to specify if media files should be downloaded to the device when data are loaded into the List control. If you download media files to the device the media files are stored in the file system on the device and will be available even when there is no connection.
Step 4 - Set the control type for the videoFilename control in the List's Detail View to a Video Recorder/Player control. When the List Quick Setup Genie created the List's Detail View, it set the control type of the videoFilename field to a textbox. To change the control type to a Video Recorder/Player, click the Control type smart field and select the Video Recorder/Player control.
Having configured the List control and its Detail View, you are now ready to build your Cordova application.
To see a list of Cordova plugins that you should enable when you build your Cordova application, download the sample component using the link shown below and then examine the setting in the component's PhoneGap default settings property.